<template>
  <view class="page">
    <view class="page__title">登录</view>
    <view class="page__desc">欢迎使用{{ appConfig.name }}!</view>
    <view class="page__form">
      <view class="input-box">
        <u-input
          v-model="formData.PhoneNumber"
          font-size="32rpx"
          prefix-icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/03/28/IIwyhuVGRZJZBjim.png"
          :prefix-icon-style="{
            width: '28rpx',
            height: '26rpx',
            marginRight: '32rpx'
          }"
          placeholder="请输入登录账号/手机号码"
          :placeholder-style="{
            fontSize: '32rpx',
            color: '#9E9E9E'
          }"
          border="none"
          clearable
        />
      </view>
      <view class="input-box">
        <u-input
          v-model="formData.Password"
          font-size="32rpx"
          :password="!pwdShow"
          prefix-icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/03/28/CdsyLptGkuMDaWNo.png"
          :prefix-icon-style="{
            width: '28rpx',
            height: '26rpx',
            marginRight: '32rpx'
          }"
          placeholder="请输入登录密码"
          :placeholder-style="{
            fontSize: '32rpx',
            color: '#9E9E9E'
          }"
          border="none"
        >
          <template #suffix>
            <view v-show="formData.Password" @tap="pwdShow = !pwdShow">
              <u-icon v-if="pwdShow" name="eye-fill" size="36rpx" />
              <u-icon v-else name="eye-off" size="40rpx" />
            </view>
          </template>
        </u-input>
      </view>
    </view>
    <view class="page__forget" @click="goToForget">忘记密码</view>
    <view class="mt-70rpx">
      <u-button
        text="登录"
        color="#386ee8"
        :disabled="!canLogin"
        :throttle-time="600"
        @click="handleLogin"
      />
    </view>
    <view class="page__register">
      <text>没有账号？</text>
      <text @click="goToRegister">立即注册</text>
    </view>

    <view class="page__policy">
      <text>登录即代表您已阅读并同意</text>
      <text @click="handleOpen(1)">《用户协议》</text>
      &
      <text @click="handleOpen(2)">《隐私政策》</text>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import { useGlobalSetting } from '@/settings/system'
import { userStore } from '@/store/modules'
import { buildUrl, showToast } from '@/utils'
import { loginApi } from './service'

@Component({ name: 'Login' })
export default class Login extends Vue {
  get appConfig() {
    return useGlobalSetting()
  }

  public pwdShow = false

  formData = {
    PhoneNumber: '',
    Password: ''
  }

  get canLogin() {
    return this.formData.Password && this.formData.PhoneNumber
  }

  onLoad() {
    uni.hideHomeButton()
    userStore.$resetState()
  }

  async handleLogin() {
    uni.showLoading({
      title: '登录中...'
    })
    try {
      const { data } = await loginApi(this.formData)
      console.log(' ', data)
      userStore.setHasLogin(false)
      userStore.setUserInfo(data)
      this.handleGoToIndex()
    } catch (e) {
      userStore.$resetState()
    } finally {
      uni.hideLoading()
    }
  }

  handleGoToIndex() {
    uni.switchTab({
      url: '/pages/index/index'
    })
  }

  goToForget() {
    uni.navigateTo({
      url: './forget/index'
    })
  }

  goToRegister() {
    uni.navigateTo({
      url: './register'
    })
  }

  handleOpen(type: 1 | 2 = 1) {
    showToast({
      title: '保护隐私!'
    })
    // return
    // const { privacyUrl } = useGlobalSetting()
    // if (!privacyUrl.length) return

    // uni.navigateTo({
    //   url: buildUrl('/pages/webview/index', {
    //     url: privacyUrl[type - 1] ?? privacyUrl[0]
    //   })
    // })
  }
}
</script>

<style lang="scss" scoped>
.page {
  @apply min-h-screen bg-white p-50rpx text-[#9e9e9e];

  &__title {
    @apply mt-26rpx text-48rpx text-[#333];
  }

  &__desc {
    @apply mt-36rpx text-32rpx;
  }

  &__form {
    @include gap-y(70rpx);
    @apply mt-179rpx flex flex-col;
  }

  &__forget {
    @apply text-26rpx text-right mt-30rpx;
  }

  &__register {
    @apply mt-50rpx text-center text-26rpx;

    text:last-child {
      @apply text-primary;
    }
  }

  &__policy {
    @apply fixed left-0 right-0 text-center text-24rpx;
    bottom: calc(44rpx + $bs-height);

    text:not(:first-child) {
      @apply text-primary;
    }
  }
}

.input-box {
  @apply pb-16rpx;
  border-bottom: 2rpx solid #f6f6f6;
}
</style>
